<template>
  <Tabs value="list">
    <Tab-pane label="商店管理" name="list">
      <div class="tool-wrap cf">
        <Button-group class="rf">
          <i-button type="ghost" icon="refresh" class="tool-btn" @click="refresh">刷新</i-button>
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">
            增加小区
          </i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteList">批量删除小区</i-button>
        </Button-group>
      </div>
      <i-table :data="shopList" :columns="columns" @on-selection-change="checkChange">
      </i-table>
    </Tab-pane>
    <Modal v-model="modal.show" :title="modal.title" class-name="vertical-center-modal" :width="800">
      <i-form ref="modalForm" :model="modal.formData" :rules="modal.rules" :label-width="80">
        <Form-item label="小区名称" prop="name">
          <i-input v-model="modal.formData.name" placeholder="请输入小区名称"></i-input>
        </Form-item>
        <Form-item label="小区地址" prop="address">
          <i-input v-model="modal.formData.address" placeholder="请输入小区地址"></i-input>
        </Form-item>
        <div class="map-wrap">
          <baidu-map
            class="map"
            :ak="mapConfig.ak"
            :zoom="mapConfig.zoom"
            :center="mapConfig.center"
            :scroll-wheel-zoom="true"
            :autoLocation="true"
            @ready="mapReady">
            <bm-marker
              :position="mapConfig.centerMarker.position"
              :dragging="true"
              @dragend="dragEnd">
            </bm-marker>
            <bm-auto-complete
              class="map-search"
              v-model="mapConfig.searchKey"
              @confirm="searchConfirm">
              <i-input v-model="mapConfig.searchKey" placeholder="请输入小区地址"></i-input>
            </bm-auto-complete>
          </baidu-map>
          <Spin size="large" fix v-if="mapConfig.loading"></Spin>
        </div>
      </i-form>
      <modal-footer slot="footer" :loading="modal.loading" @save="save" @close="closeModal"></modal-footer>
    </Modal>
  </Tabs>
</template>
<script type="text/ecmascript-6">
  import {BaiduMap, BmMarker, BmAutoComplete} from 'vue-baidu-map'
  import tableAction from '../../../components/admin/tableAction.vue'
  import modalFooter from '../../../components/admin/modalFooter.vue'
  import shopApi from '../../../api/admin/community'
  const emptyData = {
    id: 0,
    name: '',
    address: '',
    lat: 0,
    lng: 0
  }
  export default{
    components: {
      modalFooter,
      BaiduMap,
      BmMarker,
      BmAutoComplete
    },
    props: [],
    data () {
      const self = this
      const $rules = this.$rules
      return {
        shopList: [],
        columns: [
          {
            type: 'selection',
            width: 40,
            align: 'center'
          },
          {
            title: '小区名',
            key: 'name'
          },
          {
            title: '小区地址',
            key: 'address'
          },
          {
            title: '操作',
            render (h, params) {
              return h(tableAction, {props: {data: params.row, edit: self.showModal, deleteItem: self.delete}})
            }
          }
        ],
        checkList: [],
        modal: {
          show: false,
          loading: false,
          title: '增加小区',
          formData: {...emptyData},
          rules: {
            name: [$rules.required, $rules.max_60],
            address: [$rules.required, $rules.max_100]
          }
        },
        mapConfig: {
          loading: false,
          ak: 'eZ2qiTkvIsW7XNGaiSSkLyU0bGKitcSv',
          searchKey: '',
          zoom: 15,
          center: {lng: 106.50083063445, lat: 29.626746386211},
          BMap: null,
          map: null,
          ac: null,
          centerMarker: {
            position: {lat: '', lng: ''}
          }
        }
      }
    },
    methods: {
      showModal (row) {
        const self = this
        const mapConfig = self.mapConfig
        self.modal.formData = {...emptyData}
        let formData = self.modal.formData
        mapConfig.searchKey = ''
        self.modal.show = true
        if (row) {
          Object.assign(formData, row)
          if (self.mapConfig.map) {
            setTimeout(() => {
              let point = {lat: formData.lat, lng: formData.lng}
              mapConfig.center = point
              mapConfig.centerMarker.position = point
            }, 100)
          }
        } else {
          mapConfig.loading = true
          let geolocation = new mapConfig.BMap.Geolocation()
          geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() === 0) {
              let point = r.point
              mapConfig.center = point
              mapConfig.centerMarker.position = point
              Object.assign(formData, point)
              self.getLocation(point, res => {
                formData.address = res.address
                mapConfig.loading = false
              })
            }
          }, {enableHighAccuracy: true})
        }
      },
      closeModal () {
        this.modal.show = false
      },
      checkChange (selection) {
        this.checkList = selection
      },
      refresh () {
        this.getList()
      },
      getList () {
        const self = this
        shopApi.getList(data => {
          self.shopList = data
        })
      },
      save () {
        const self = this
        self.$refs.modalForm.validate(valid => {
          if (!valid) {
            return
          }
          self.modal.loading = true
          shopApi.save(self.modal.formData, res => {
            self.getList()
            self.modal.show = false
            self.modal.loading = false
          }, msg => {
            self.modal.loading = false
          })
        })
      },
      delete (row) {
        const self = this
        self.$isConfirm('确认删除小区', () => {
          shopApi.delete(row.id, res => {
            self.getList()
          })
        })
      },
      deleteList () {
        const self = this
        if (self.checkList.length === 0) {
          self.$Message.warning('请选择小区')
          return
        }
        let ids = []
        self.checkList.forEach(item => {
          ids.push(item.id)
        })
        self.$isConfirm('确认删除小区', () => {
          shopApi.deleteList(ids, res => {
            self.getList()
          })
        })
      },
      mapReady ({BMap, map}) {
        const mapConfig = this.mapConfig
        mapConfig.BMap = BMap
        mapConfig.map = map
      },
      dragEnd (type) {
        const formData = this.modal.formData
        Object.assign(formData, type.point)
        self.getLocation(type.point, function (rs) {
          formData.address = rs.address
        })
      },
      getPoint (address, callback) {
        const self = this
        let geo = new this.mapConfig.BMap.Geocoder()
        geo.getPoint(address, function (point) {
          if (point) {
            callback(point)
          } else {
            self.$Message.warning('没有获取到改地址位置信息')
          }
        }, '重庆市')
      },
      getLocation (point, callback) {
        let geo = new this.mapConfig.BMap.Geocoder()
        geo.getLocation(point, callback)
      },
      searchConfirm (type) {
        const self = this
        const mapConfig = self.mapConfig
        const value = type.item.value
        let searchValue = value.province + value.city + value.district + value.street + value.streetNumber + value.business
        self.modal.formData.address = searchValue
        self.getPoint(searchValue, point => {
          mapConfig.center = point
          mapConfig.centerMarker.position = point
          Object.assign(self.modal.formData, point)
        })
      }
    },
    created () {
      this.getList()
    },
    mounted () {
    }
  }
</script>
<style lang="less">
  .map-wrap {
    position: relative;
    height: 360px;

    .map-search {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 260px;
    }
    .map {
      width: 100%;
      height: 100%;
    }
    .BMap_cpyCtrl {
      display: none;
    }
  }

  .tangram-suggestion-main {
    height: 320px;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
